<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore_BMS</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css" media="screen" />

</head>
<body>
<div th:replace="common/left">

</div>
<div id="BackLink">
    <a href="/admin_catalog/admin_addGood">Return to Add</a>
</div>
<div id="bCatalog">

    <h3>Add New Category</h3>

    <form action="/admin_catalog/addCategory" method="post" th:object="${newCategory}">

        <table>
            <tr>
                <td>categoryId</td>
                <td>
                    <input id="categoryId" type="text" onblur="checkCategoryId()" th:field="*{categoryId}" />
                </td>
                <span id="isExistInfo"></span>
            </tr>
            <tr>
                <td>name</td>
                <td>
                    <input id="name" type="text" th:field="*{name}" />
                </td>
            </tr>

        </table>

        <a class="button" href="javascript:location.reload()">Clear All</a>
        <input type="submit" name="addCategory" value="Save" />

    </form>
    <script>
        var xhr;
        function checkCategoryId() {
            var categoryId = document.getElementById('categoryId').value;
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = process;
            xhr.open("GET","/admin_catalog/CheckCategoryId?categoryId="+categoryId,true);
            xhr.send(null);
        }
        function process(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var responseInfo = xhr.responseText;
                    var msg = document.getElementById('isExistInfo');
                    if(responseInfo == 'Not Exist'){
                        msg.innerText = 'This Id is available!';
                        msg.style.color = "green";

                    }else if(responseInfo == 'Exist'){
                        msg.innerText = 'Sorry,this id is used.';
                        msg.style.color = "red";


                    }
                }
            }
        }

    </script>
</div>
</div>

</body>
</html>